<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/rem.css"/>
    <link rel="stylesheet" href="../css/repeat.css">
    <link rel="stylesheet" href="../assets/fonts/iconfont/iconfont.css">
    <link href="../assets/css/GA.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            background-image: url('../image/bigscreen-bj.png');
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .el-tree-node__content:hover {
            background-color: rgba(0, 0, 0, .8);
        }

        .el-input__inner {
            background-color: #00295C !important;
            border: 1px solid #056DAD !important;
            color: rgb(0, 174, 244) !important;
        }

        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */

        .sroll-2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
            background-color: transparent;
        }

        /* 定义滚动条轨道 内阴影+圆角 */

        .sroll-2::-webkit-scrollbar-track {
            /*-webkit-box-shadow: inset 0 0 6px #fff;*/
            border-radius: 1px;
            background-color: #0051AA;
        }

        /* 定义滑块 内阴影+圆角 */

        .sroll-2::-webkit-scrollbar-thumb {
            border-radius: 1px;
            /*-webkit-box-shadow: inset 0 0 6px #00a7ec;*/
            background-color: #0051AA;
        }

        .tabUl {
            float: left;
            margin-left: 30rem;
            overflow: hidden;
        }

        .tabUl li {
            float: left;
            padding: 0px 20px;
            height: 80px;
            line-height: 80px;
            color: #79afff;
            font-size: 18px;
            cursor: pointer;
        }

        .tabUl li.li_active {
            height: 77px;
            font-size: 18px;
            line-height: 80px;
            border-bottom: 3px solid #0070ff;
        }

        /*.el-scrollbar {*/

        /*background-color: #00295C !important;*/

        /*border: 0px solid #056DAD !important;*/

        /*color: #0162A6 !important;*/

        /*}*/

        /*.el-select-dropdown__wrap {*/

        /*background-color: #00295C !important;*/

        /*border: 0px solid #056DAD !important;*/

        /*color: #0162A6 !important;*/

        /*}*/

        /*.el-scrollbar__view {*/

        /*background-color: #00295C !important;*/

        /*border: 0px solid #056DAD !important;*/

        /*color: #0162A6 !important;*/

        /*}*/

        /*.el-scrollbar__wrap {*/

        /*background-color: #00295C !important;*/

        /*border: 0px solid #056DAD !important;*/

        /*color: #0162A6 !important;*/

        /*}*/

        /*.el-select-dropdown__list {*/

        /*background-color: #00295C !important;*/

        /*color: #0162A6 !important;*/

        /*}*/

        /*.el-select-dropdown__item {*/

        /*background-color: #00295C !important;*/

        /*color: #0162A6 !important;*/

        /*}*/

        /*.el-select-dropdown__item:hover {*/

        /*background-color: #00295C !important;*/

        /*color: #ffffff !important;*/

        /*}*/

        /*.el-tree-node__content::choices{*/

        /*background-color: rgba(0, 0, 0, .8);*/

        /*}*/
    </style>
</head>

<body class="bighome2">
<div id="app" v-cloak>
    <div style="width: 100%;height: 3.8rem;background-image: url('../image/top-logo.png'); background-size: 100%;background-position: center;background-repeat: no-repeat;">
        <ul class="tabUl">
            <li :class="{'li_active':activeIndex === index}" v-for="(item, index) in menuList" :key="index"
                @click="routerGo(item)">{{item.name}}
            </li>
        </ul>
    </div>
    <div style="width: 100%;height: 3.5rem;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: left;align-items: center;background-color: #0A1339;">
        <div style="width: 0.3rem;height: 0.3rem;background-color: #0162A6;border-radius: 0.15rem;margin-left: 2rem;margin-right: 0.6rem">
        </div>
        <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#0162A6;line-height:3.5rem;">智能作战系统 > 地界防控 ></div>
        <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#47CDFE;line-height:3.5rem;">外来人口感知</div>
        <el-button type="primary" size="mini" @click="window.location.href='bigHome.html'" style="position:absolute;right:5rem;">
            重点人员管控
        </el-button>
    </div>

    <div style="width: auto;flex: 1;display: flex;flex-direction: row;flex-wrap: nowrap;padding-left: 1.5rem;padding-right: 1.5rem;">

        <div style="flex: 1;height: 100%;display: flex;flex-direction: row;flex-wrap: wrap;">
            <div style="width: 20rem;height: 22rem;border:1px solid #0E5283;display: flex;flex-wrap: nowrap;flex-direction: column;background-color: #0A1339;">
                <div style="font-family:MicrosoftYaHei;color:#00A6FB;line-height:1.5rem;width: 100%;text-align: center;">
                    外来重点人口
                </div>
                <div style="flex: 1;overflow-y: scroll">
                    <el-tree :data="tree1Data" :props="defaultProps" show-checkbox @check="handleCheckChange"
                             node-key="value" ref="tree" class="tree"
                             style="background-color: rgba(0,0,0,0);color: #00A6FB"></el-tree>
                </div>
                <div class="btn-box"
                     style="overflow:hidden;display:flex;justify-content:center;padding:.5rem 0;background:rgba(0, 53, 120, 1)">
                    <el-button type="primary" size="mini" @click="provinceSub" style="margin-right:1rem">
                        省级监测
                    </el-button>
                    <el-button type="primary" size="mini" @click="citySub">
                        市级监测
                    </el-button>
                </div>
            </div>

            <div style="flex: 1;height: 22rem;border:1px solid #0E5283;display: flex;flex-wrap: nowrap;flex-direction: column;margin-left: 1rem;background-color: #0A1339;">
                <div style="font-family:MicrosoftYaHei;color:#00A6FB;line-height:1.5rem;width: 100%;text-align: center;margin-top: 1rem;">
                    重点外来人口感知
                </div>
                <div id="myChart1" style="flex: 1;overflow: hidden;margin-top: -2.5rem">

                </div>
            </div>

            <div style="width: 100%;height: 16rem;border:1px solid #0E5283;display: flex;flex-wrap: nowrap;flex-direction: column;background-color: #0A1339; ">
                <div style="width: 100%;height: 13.5rem;" id="myChart3">
                </div>

                <div style="width: 97%;height: 2.5rem;display: flex;flex-direction: row;flex-wrap: nowrap">
                    <div @click="choicemonth(item)" v-for="(item, i) in monthList"
                         style="flex: 1;height: 100%;line-height: 2.5rem;text-align: center;font-size:12px;font-family:MicrosoftYaHei;cursor: pointer"
                         :style="{color:item == month?'#FFFFFF':'rgba(23,101,177,1)'}">
                        {{i+1}}月
                    </div>
                </div>

            </div>


        </div>
        <div style="width: 22.5rem;height: 100%;display: flex;flex-direction: column;flex-wrap: nowrap;margin-left: 1rem">
            <div style="width: 100%;height: 35%;border:1px solid #0E5283;display: flex;flex-direction: column;flex-wrap: nowrap;background-color: #0A1339;">
                <div style="width: 100%;height: 2.5rem;display: flex;flex-direction: row;flex-wrap: nowrap;background-color: #00295C;align-items: center">
                    <div style="line-height: 2.5rem;flex: 1;font-family:MicrosoftYaHei;color:rgba(0,174,244,1);margin-left: 0.7rem">
                        重点外来人口占比
                    </div>
                    <el-select v-model="date1" placeholder="请选择"
                               style="width: 8rem;height: 1.9rem;border: 1px solid #056DAD;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div id="myChart2" style="flex: 1;padding-top: -2.5rem">

                </div>

            </div>
            <div style="width: 100%;height: 35%;border:1px solid #0E5283;margin-top: 0.8rem;background-color: #0A1339;"
                 id="myChart4">


            </div>
            <div style="width: 100%;height: 40%;border:1px solid #0E5283;margin-top: 0.8rem;margin-bottom: 1rem;display: flex;flex-direction: column;flex-wrap: nowrap;background-color: #0A1339;position: relative">
                <div style="width: 100%;height: 2.5rem;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between">
                    <div style="font-size:0.8rem;font-family:MicrosoftYaHei;color:#00AEF4;line-height: 2.5rem;margin-left: 0.6rem">
                        重点外来人口趋势比对
                    </div>
                    <el-button @click="chioceAddress" style="width: 5rem;height: 1.4rem;background-color: #075E9A;
color: #A0D4F8;font-size: 0.6rem;text-align: center;line-height: 1.4rem;padding: 0;margin: 0;border: 0;margin-right:2rem">
                        选择地点
                    </el-button>
                    <!--<el-button-->
                    <!--style="width: 5rem;height: 1.4rem;background-color: #075E9A;-->
                    <!--color: #A0D4F8;font-size: 0.6rem;text-align: center;line-height: 1.4rem;padding: 0;margin: 0;border: 0">-->
                    <!--选择时间-->
                    <!--</el-button>-->
                    <!--<el-select v-model="value" placeholder="请选择" size="small"-->
                    <!--style="width: 5rem;height: 1.4rem;border: 1px solid #056DAD;line-height: 1.4rem;padding: 0;margin: 0;border: 0">-->
                    <!--<el-option-->
                    <!--v-for="item in options"-->
                    <!--:key="item.value"-->
                    <!--:label="item.label"-->
                    <!--:value="item.value">-->
                    <!--</el-option>-->
                    <!--</el-select>-->
                    <el-button v-if="false" style="width: 3rem;height: 1.4rem;background-color: #075E9A;
color: #A0D4F8;font-size: 0.6rem;text-align: center;line-height: 1.4rem;padding: 0;margin: 0;border: 0">动态显示
                    </el-button>
                </div>
                <div v-show="showDuibi"
                     style="z-index: 999999;position: absolute; left: 5%;top: 2.5rem;width: 90%;height: 10rem;background: #01336B;display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center">
                    <div style="width: 40%;height: 100%;overflow-y: scroll;" class="sroll-2">
                        <el-tree :data="tree2Data" :props="defaultProps" show-checkbox
                                 @check-change="handleCheckChange2" node-key="value" ref="tree2"
                                 class="tree" style="background-color: rgba(0,0,0,0);color: #00A6FB"></el-tree>
                    </div>
                    <div style="width: 1px;height: 80%;background-color: #0051AA"></div>
                    <div style="width: 10%;height: 10%;text-align: center;color: #00AEF4">
                        <i class="icon iconfont icon-shuangjiantou"></i>
                    </div>
                    <div style="width: 1px;height: 80%;background-color: #0051AA"></div>
                    <div style="width: 15%;color: #048BC1;padding-left: 5%">
                        <div v-for="(item, i) in cityList">
                            {{item.label}}
                        </div>
                    </div>
                    <div style="width: 1px;height: 80%;background-color: #0051AA"></div>
                    <div style="width: 15%;height: 4rem;margin-left: 5%">
                        <el-button @click="startDuibi"
                                   style="background:#FF8A00;border-radius: 0.3rem;color: #FEFFFF;height: 1.5rem;width: 4rem;text-align: center;line-height: 1.5rem;padding: 0;margin: 0;border: 0;margin-bottom: 1rem">
                            开始对比
                        </el-button>
                        <el-button @click="resetChecked"
                                   style="background:#015ED2;border-radius: 0.3rem;color: #FEFFFF;height: 1.5rem;width: 4rem;text-align: center;line-height: 1.5rem;padding: 0;margin: 0;border: 0">
                            清空
                        </el-button>
                    </div>
                </div>
                <div style="flex: 1;z-index: 9" id="myChart5">

                </div>

            </div>
        </div>
    </div>

</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue/vue.js"></script>
<script src="../js/jquery-3.0.0.min.js.js"></script>
<script type="text/javascript" src="../js/element/element.js"></script>
<script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>-->
<script type="text/javascript" src="../js/urls.js"></script>
<script src="../js/axios.min.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>
<script src="../js/map/baiduInterface.js"></script>
<script src="../js/mapComponent.js"></script>
<script src="../js/areaData.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/china.js"></script>
<script src="../js/geoCoordMap.js"></script>

<script type="text/javascript">

    var vm;
    var myChart1;
    var myChart2;
    var myChart3;
    var myChart4;
    var myChart5;
    var myDate = new Date();
    vm = new Vue({
        el: '#app',
        data: {
            tree1Data: [],
            tree2Data: [],
            menuList: [{
                name: '归属地查询',
                path: './attributionSearch.html'
            },
                {
                    name: '外来人口监测',
                    path: './externalPeople.html'
                },
                {
                    name: '外来人口驻留分析',
                    path: './peopleAnalyse.html'
                },
                {
                    name: '人口流向分析',
                    path: './populationAnalysis.html'
                }
            ],
            activeIndex: -1,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            options: [
                {
                    value: 1,
                    label: '最近一天'
                },
                {
                    value: 2,
                    label: '最近一周'
                },
                {
                    value: 3,
                    label: '最近一月'
                }
            ],
            date1: 1,
            value: '1',
            monthList: [
                '01',
                '02',
                '03',
                '04',
                '05',
                '06',
                '07',
                '08',
                '09',
                '10',
                '11',
                '12',
            ],
            month: '01',
            showDuibi: false,
            cityList1: [],
            cityListType: -1,
            cityList: [],
            myChart1Option: {},
            myChart2Option: {},
            myChart3Option: {},
            myChart4Option: {},
            myChart5Option: {},
        },
        created: function () {
        },
        mounted: function () {
            this.initTree1(1)
            this.initTree2()
            // this.getChar2Data()
            this.month = this.monthList[myDate.getMonth()]
            this.getChar3Data()
            this.getChar5Data()
        },
        methods: {
            // handleSelectChange(val){
            //     if(this.pieType === 1){
            //         this.provinceSub()
            //     } else if(this.pieType === 2){
            //         this.citySub()                            
            //     }
            // },
            routerGo(item) {
                window.location.href = item.path
            },
            initTree1: function (type) {
                var self = this;
                if (type == 1) {
                    for (var i = 0, len = provinceAndCityData.length; i < len; i++) {
                        var temp = provinceAndCityData[i];
                        temp.disabled = false;
                        self.tree1Data.push(temp)
                    }
                } else if (type == 2) {
                    for (var i = 0, len = provinceAndCityData.length; i < len; i++) {
                        var temp = provinceAndCityData[i];
                        temp.disabled = true;
                        for (var j = 0, len2 = temp.children.length; j < len2; j++) {
                            temp.children[j].disabled = false;
                        }
                        self.tree1Data.push(temp)
                    }
                }

            },
            initTree2: function () {
                var self = this;

                for (var i = 0, len = provinceAndCityData.length; i < len; i++) {
                    var temp = {};
                    temp.label = provinceAndCityData[i].label;
                    temp.value = provinceAndCityData[i].value;
                    temp.children = provinceAndCityData[i].children;
                    temp.disabled = true;
                    self.tree2Data.push(temp)

                }
            },
            getChar1Data: function (data) {
                let max_num = 0
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = getCityPosition(data[i].province, data[i].city);
                        if (geoCoord) {
                            res.push({
                                name: data[i].province + data[i].city,
                                value: geoCoord.concat(data[i].person_num)
                            });
                            max_num = max_num < data[i].person_num ? data[i].person_num : max_num
                        }
                    }
                    return res;
                };
                if (data == null) {
                    data = []
                } else {

                }
                var seriesData1 = convertData(data);
                this.myChart1Option = {
                    backgroundColor: '#00000000',
                    title: {
                        text: '',
                        subtext: '',
                        sublink: '',
                        left: 'center',
                        textStyle: {
                            color: '#00A6FB',
                            fontSize: '1.2rem'
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: max_num,
                        left: 'left',
                        inRange: {
                            color: ['#8EED91', '#FBFE1E', '#FFBC15', '#FF4D05', '#7F0200']
                        },
                        text: ['High', 'Low'],          // 文本，默认为数值文本
                        textStyle: {
                            color: 'rgb(0, 174, 244)'
                        },
                        calculable: true
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            let name = params.data.name ? params.data.name : ''
                            let value = params.data.value[2] ? params.data.value[2] : ''
                            return name + '<br\>' + '外来人口：' + params.data.value[2];
                        }
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     y: 'bottom',
                    //     x: 'right',
                    //     data: ['pm2.5'],
                    //     textStyle: {
                    //         color: '#fff'
                    //     }
                    // },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        scaleLimit: {
                            min: 1,
                            max: 4
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            data: seriesData1,
                            symbolSize: function (val) {
                                // return val[2] / 10000;
                                if (val[2] > 10000)
                                    return 16;
                                else
                                    return 8;

                            },
                            // label: {
                            //     normal: {
                            //         formatter: '{b}',
                            //         position: 'right',
                            //         show: false
                            //     },
                            //     emphasis: {
                            //         show: true
                            //     }
                            // },
                            itemStyle: {
                                normal: {
                                    color: '#ddb926'
                                }
                            }
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: convertData(data.sort(function (a, b) {
                                return b.person_num - a.person_num;
                            }).slice(0, 5)),
                            symbolSize: function (val) {
                                // return val[2] / 10000;
                                if (val[2] > 10000)
                                    return 16;
                                else
                                    return 8;

                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            // label: {
                            //     normal: {
                            //         formatter: '{b}',
                            //         position: 'right',
                            //         show: true
                            //     }
                            // },
                            itemStyle: {
                                normal: {
                                    color: '#f4e925',
                                    shadowBlur: 10,
                                    shadowColor: '#2a333d'
                                }
                            },
                            zlevel: 1
                        }
                    ]
                };
                this.initMap()
            },
            getChar2Data: function (provinceList) {
                let self = this
                let option = {
                    method: 'POST',
                    url: 'collect/personRatio',
                    data: {
                        type: self.date1,
                        province: self.cityType,
                        provinceList: provinceList
                    }
                }
                self.$HttpUtil(option, res => {
                    if (res.code === 0) {
                        var seriesData = [];
                        for (var i = 0, len = res.data.length; i < len; i++) {
                            var name = self.cityType == 1 ? res.data[i].province : res.data[i].province + res.data[i].city
                            seriesData.push({
                                value: res.data[i].person_num,
                                name: name,
                                city_code: res.data[i].city_code,
                                province_code: res.data[i].province_code
                            })
                        }

                        self.myChart2Option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '人口占比',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: seriesData,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        }
                        if (myChart4) {
                            myChart4.clear()
                        }

                        self.initR()
                    } else {
                        this.$NotifyUtil({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })

            },
            getChar3Data: function () {
                let self = this
                let option = {
                    method: 'GET',
                    url: 'collect/selectZbOfMonth.do',
                    data: {
                        moth: self.month
                    }
                }
                self.$HttpUtil(option, res => {
                    if (res.code === 0) {
                        var legendData = [];
                        var series = [];
                        var xAxisData = [];
                        if (res.data == "" || res.data == null) {
                            self.getChar1Data(null)

                        } else {
                            self.getChar1Data(res.data.allCitys)
                            for (var i = 0, len = res.data.rankCitys.length; i < len; i++) {
                                legendData.push(res.data.rankCitys[i].city)
                                var seriesData = [];
                                if (res.data.rankCitys[i].sdaticList[0]) {
                                    var startDate = convertDateFromString(res.data.rankCitys[i].sdaticList[0].sdate)
                                    var startDay = startDate.getDate()
                                    for (var k = 1; k < startDay - 1; k++) {
                                        seriesData.push(0)
                                    }
                                }
                                for (var j = 0, len2 = res.data.rankCitys[i].sdaticList.length; j < len2; j++) {
                                    seriesData.push(res.data.rankCitys[i].sdaticList[j].person_num)
                                }
                                series.push({
                                    name: res.data.rankCitys[i].city,
                                    type: 'line',
                                    symbolSize: 10,
                                    data: seriesData
                                })
                            }
                            var daycount = mGetDate();
                            for (var i = 0; i < daycount; i++) {
                                xAxisData.push(i + 1)
                            }
                        }

                        self.myChart3Option = {
                            title: {
                                text: myDate.getFullYear() + '年' + self.month + '月指标',
                                textStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: legendData,
                                textStyle: {
                                    color: '#00A6FB',
                                    fontSize: 12
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData,
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                axisLabel: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                }
                            },
                            yAxis: {
                                name: '人次',
                                type: 'value',
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                axisLabel: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                }
                            },
                            series: series
                        };
                        self.initMyChart3()
                    } else {
                        this.$NotifyUtil({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })

            },
            getChar4Data: function (province_code) {
                let self = this
                let option = {
                    method: 'POST',
                    url: 'collect/personRatioWeek',
                    data: {
                        type: 2,
                        province: self.cityType,
                        provinceCode: province_code
                    }
                }
                self.$HttpUtil(option, res => {
                    if (res.code === 0) {
                        var legendData = [];
                        var series = [];
                        var yAxisData = [];
                        for (var i = 0, len = res.data.length; i < len; i++) {
                            legendData.push(res.data[i].city)
                            var seriesData = [];
                            for (var j = 0, len2 = res.data[i].list.length; j < len2; j++) {
                                seriesData.push(res.data[i].list[j].person_num)
                                if (yAxisData.length < 7) {
                                    yAxisData.push(res.data[i].list[j].sdate)
                                }
                            }

                            series.push({
                                name: res.data[i].province + res.data[i].city,
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },
                                data: seriesData
                            })
                        }
                        self.myChart4Option = {
                            title: {
                                text: '外来人口',
                                subtext: '',
                                x: 'center',
                                top: 25,
                                textStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            // legend: {
                            //     data: legendData,
                            //     textStyle: {
                            //         color: '#00A6FB',
                            //         fontSize: 12
                            //     }
                            // },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                axisLabel: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                }
                            },
                            yAxis: {
                                type: 'category',
                                data: yAxisData,
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                axisLabel: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                }
                            },
                            series: series
                        };
                        self.initMyChart4()
                    } else {
                        this.$NotifyUtil({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
            },
            getChar5Data: function () {
                let self = this

                let provinceList = []
                self.cityList.forEach(element => {
                    provinceList.push(element.value)
                });

                let option = {
                    method: 'POST',
                    url: 'collect/personRatioBD',
                    data: {
                        type: 3,
                        province: 2,
                        provinceList: provinceList
                    }
                }

                self.$HttpUtil(option, res => {
                    if (res.code === 0) {
                        var legendData = [];
                        var series = [];
                        var xAxisData = [];
                        if (res.data !== "" || res.data.length == 0) {
                            for (var i = 0, len = res.data.length; i < len; i++) {
                                legendData.push(res.data[i].city)
                                var seriesData = [];
                                for (var j = 0, len2 = res.data[i].list.length; j < len2; j++) {
                                    seriesData.push(
                                        {
                                            value: res.data[i].list[j].person_num,
                                            name: res.data[i].list[j].sdate,
                                        }
                                    )

                                    if (xAxisData.length < res.data[i].list.length) {
                                        xAxisData.push(res.data[i].list[j].weekday)
                                    }
                                }
                                series.push({
                                    name: res.data[i].city,
                                    type: 'line',
                                    symbolSize: 10,
                                    data: seriesData
                                })
                            }
                        }
                        self.myChart5Option = {
                            title: {
                                text: '',
                                textStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(params){
                                    params[0].data.name 
                                    return params[0].data.name + '<br/>' + params[0].seriesName + ':' + params[0].data.value 
                                }
                            },
                            // legend: {
                            //     data: legendData,
                            //     textStyle: {
                            //         color: '#00A6FB',
                            //         fontSize: '1.2rem'
                            //     }
                            // },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData,
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                axisLabel: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                nameTextStyle: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                axisLabel: {
                                    color: '#00A6FB',
                                    fontSize: '1.2rem'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "#0D416F"
                                    }
                                }
                            },
                            series: series
                        };
                        self.initMyChart5()
                    } else {
                        this.$NotifyUtil({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })

            },
            initMap: function () {
                var self = this
                myChart1 = echarts.init(document.getElementById('myChart1'));
                // 使用刚指定的配置项和数据显示图表。
                myChart1.clear()
                myChart1.setOption(self.myChart1Option);
            },
            initR: function () {
                var self = this;
                myChart2 = echarts.init(document.getElementById('myChart2'));
                // 使用刚指定的配置项和数据显示图表。
                myChart2.clear()
                myChart2.setOption(this.myChart2Option);
                myChart2.on('click', function (params) {
                    if (self.cityType == 1) {
                        self.getChar4Data(params.data.province_code);
                    } else {
                        self.getChar4Data(params.data.city_code);
                    }
                });
            },
            initMyChart3: function () {
                myChart3 = echarts.init(document.getElementById('myChart3'));
                myChart3.clear()
                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(this.myChart3Option);
            },
            initMyChart4: function () {
                myChart4 = echarts.init(document.getElementById('myChart4'));
                myChart4.clear()
                myChart4.setOption(this.myChart4Option);
            },
            initMyChart5: function () {
                var self = this
                myChart5 = echarts.init(document.getElementById('myChart5'));
                myChart5.clear()
                myChart5.setOption(self.myChart5Option);
            },
            handleCheckChange: function (check, data) {
                this.cityList1 = data.checkedNodes
            },
            provinceSub() {
                let self = this
                let provinceList = []
                self.cityList1.forEach(element => {
                    if (element.children) {
                        provinceList.push(element.value)
                    }
                });
                self.cityType = 1
                self.getChar2Data(provinceList)
            },
            citySub() {
                let self = this
                let cityList = []
                this.cityList1.forEach(element => {
                    if (!element.children) {
                        cityList.push(element.value)
                    }
                });
                self.cityType = 2
                self.getChar2Data(cityList)

            },
            handleCheckChange2: function (data, checked, indeterminate) {
                var self = this
                if (self.cityList.length >= 5 && checked) {
                    self.$notify({
                        title: '警告',
                        message: '最多五条',
                        type: 'warning'
                    });
                    var keys = self.$refs.tree2.getCheckedKeys();
                    keys.splice(keys.length - 1, 1);
                    this.$refs.tree2.setCheckedKeys(keys)
                } else {
                    if (checked) {
                        self.cityList.push({
                            label: data.label,
                            value: data.value
                        })
                    } else {
                        self.removeIterm(self.cityList, {
                            label: data.label,
                            value: data.value
                        })
                    }

                }
            },
            resetChecked: function () {
                this.cityList = []
                this.$refs.tree2.setCheckedKeys([]);
            },
            chioceAddress: function () {
                var self = this;
                self.showDuibi = !self.showDuibi;
            },
            choicemonth: function (item) {
                var self = this
                self.month = item
                self.getChar3Data()
            },
            startDuibi: function () {
                var self = this;
                self.showDuibi = false
                self.getChar5Data()
            },
            removeIterm: function (arr, val) {
                var temp = arr
                var index = -1
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].label == val.label) index = i;
                }
                if (index > -1) {
                    temp.splice(index, 1);
                }
                arr = temp
            }
        },
        computed: {},
        watch: {
            date1: function (val, oldVal) {
                if(this.cityType === 1){
                    this.provinceSub()
                } else if(this.cityType === 2){
                    this.citySub()                    
                }
            },
        },
        components: {},
        filters: {}
    })


</script>
</body>

</html>